<template>
	<view class="container">
		<view class="top">
			<view>总余额(元)</view>
			<view>{{ balance }}</view>
		</view>
		<view class="line"></view>
		<view class="bottom-box">
			<block v-for="(item, index) in listData" :key="index">
				<view class="bottom" @click="gotojilu(item)">
					<view class="img-box">
						<image class="w100 h100" :src="item.avatar"></image>
					</view>
					<view class="data-box">
						<view class="flex justify-between">
							<view class="s28">{{ item.shopname }}</view>
						</view>
						<view class="flex justify-between">
							<view class="time">{{ get_date(item.createtime) }}</view>
							<view class="money">
								<text class="s28">余额：</text>
								{{ item.balance }}
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listData: [],
			balance: 0
		};
	},
	onLoad(options) {
		this.balance = options.balance != 'null' ? options.balance : 0;
		this.getBalance();
	},
	methods: {
		getBalance() {
			this.$request({
				url: 'user/balance_list',
				method: 'POST'
			}).then((res) => {
				if (res.data.code == 1) {
					this.listData = res.data.data;
				}
			});
		},
		gotojilu(item) {
			console.log(item);
			uni.navigateTo({
				url: '/pages/filePages/rechargeRecord/rechargeRecord?shop_id=' + item.shop_id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	.top {
		padding: 30upx;
		view {
			&:first-child {
				font-size: 24upx;
				margin-top: 60upx;
			}
			&:last-child {
				font-size: 72upx;
				font-weight: 500;
				margin-top: 30upx;
			}
		}
	}
	.line {
		width: 100%;
		height: 10upx;
		background-color: #f4f5f9;
	}
	.bottom-box {
		padding: 30upx;
	}
	.bottom {
		width: 686upx;
		border-bottom: 2upx solid #efefef;
		margin: 0 auto;
		padding-bottom: 34upx;
		margin-bottom: 32upx;
		display: flex;

		.img-box {
			width: 80rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
			margin-right: 20rpx;
			background-color: #d9d9d9;
		}

		.data-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.time {
				font-size: 26rpx;
				line-height: 26rpx;
				color: #333;
			}
			.money {
				font-size: 32rpx;
				line-height: 32rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}
}
</style>
